<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-制作计算器</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1">
    <select v-model="operate">
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="/">除</option>
    </select>
    <input type="text" v-model="num2">
    = <span v-text="result"></span><br>
    <button @click="calculate()">计算</button>
</div>

</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            num1: 1,
            num2: 1,
            operate: "+",
            result: 2
        },
        methods: {
            calculate() {
                //执行计算
                var result = eval(this.num1 + this.operate + this.num2);
                console.log(result);
                this.result = result;
            }
        }
    })

</script>
</html>